<template>
    <div clas="xima">
        <header>
            <ol class="breadcrumb">
                <li>
                    <router-link to="/single">DRGs案例</router-link>
                </li>
                <li>
                    <router-link to="/multiple">批量编码查询</router-link>
                </li>
            </ol>
        </header>
        <div class="ximacontent">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                    <div class="singleTable">
                        <div class="singleTitle">
                           <div class="input-group">
                                <span class="input-group-addon"
                                      id="basic-addon1">诊断编码或名称:</span>
                                <input type="text"
                                       class="form-control"
                                       placeholder="请输入诊断编码或名称"
                                       aria-describedby="basic-addon1">
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon"
                                      id="basic-addon1">操作编码:</span>
                                <input type="text"
                                       class="form-control"
                                       placeholder="请输入操作编码"
                                       aria-describedby="basic-addon1">
                            </div>
                            <button type="button"  class="btn btn-primary" style="margin-right:20px;"><span class="glyphicon glyphicon-search">查询</span></button>
                            <button type="button"  class="btn btn-success" style="margin-right:20px;">上传<span class="glyphicon glyphicon-arrow-up"></span></button>
                            <button type="button"  class="btn btn-info">下载<span class="glyphicon glyphicon-arrow-down"></span></button>
                        </div>
                        <table class="table table-bordered  table-hover table-success">
                            <thead class="thead-default">
                                <tr>
                                    <th>诊断/编码操作</th>
                                    <th>名称</th>
                                    <th>DRG编码</th>
                                    <th>名称</th>
                                    <th>CMI</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in tableData" :key="index">
                                    <td style="text-align:center;">{{item.operate}}</td>
                                    <td style="text-align:center;">{{item.name}}</td>
                                    <td style="text-align:center;">{{item.DRGs}}</td>
                                    <td style="text-align:center;">{{item.name1}}</td>
                                    <td style="text-align:center;">{{item.cmi}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-xs-6 col-md-4">
                    <div class="guide">
                        <div class="guideTop">
                            <ul>
                                <li>
                                    <router-link to="/single">单个编码查询</router-link>
                                </li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li role="separator"
                                    class="divider"></li>
                                <li>
                                    <router-link to="/multiple">批量编码查询</router-link>
                                </li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li>
                                    <router-link to="/singleGroup">病案分组管理</router-link>
                                </li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li>
                                    <router-link to="/multipleGroup">批量分组管理</router-link>
                                </li>
                            </ul>
                        </div>
                        <div class="guideTip">
                            <p class="connect_h">联系我们</p>
                            <hr style="border-top:1px solid #ccc;" width="100%" color="#ccc" size=1>
                            <div><span>电话：861068005755,861068006083</span></div>
                            <div><span>Email: xmbj2005@163.com</span></div>
                            <div><span>邮箱: 492800904@qq.com</span></div>
                            <div>
                              <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
                            </div>
                            <p>
                                <img src="../assets/code.jpg"
                                     alt="" />
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            tableData: [
                {
                    operate: "0.0102",
                    name: "颈部血管治疗性超声",
                    DRGs: "FN11",
                    name1: "外周动脉经皮血管内检查和/或治疗，伴有严重并发症与合并症",
                    cmi: "2.18"
                },
                {
                    operate: "0.0102",
                    name: " 颈部血管治疗性超声",
                    DRGs: "FN15",
                    name1: "外周动脉经皮血管内检查和/或治疗，不伴并发症与合并症",
                    cmi: "1.5"
                },
                {
                    operate: "00.0200x001",
                    name: "血管治疗性超声",
                    DRGs: "FM21",
                    name1: "其他经皮心血管治疗，伴有严重并发症与合并症",
                    cmi: "2.47"
                },
                {
                    operate: "00.0200x001",
                    name: "心脏血管治疗性超声",
                    DRGs: "FM23",
                    name1: "其他经皮心血管治疗，伴有并发症与合并症",
                    cmi: "2.17"
                },
                {
                    operate: "00.0200x001",
                    name: "心脏血管治疗性超声",
                    DRGs: "FM25",
                    name1: "其他经皮心血管治疗，不伴并发症与合并症",
                    cmi: "1.43"
                },
                {
                    operate: "0.03",
                    name: "周围血管治疗性超声",
                    DRGs: "FN11",
                    name1: "外周动脉经皮血管内检查和/或治疗，伴有严重并发症与合并症",
                    cmi: "2.18"
                },
                {
                    operate: "0.03",
                    name: "周围血管治疗性超声",
                    DRGs: "FN15",
                    name1: "外周动脉经皮血管内检查和/或治疗，不伴并发症与合并症",
                    cmi: "1.5"
                },
                {
                    operate: "0.03",
                    name: "周围血管治疗性超声",
                    DRGs: "ZJ11",
                    name1:
                        "与多发重要创伤诊断有关的其他手术室操作，伴有严重并发症与合并症",
                    cmi: "8.14"
                },
                {
                    operate: "0.03",
                    name: "周围血管治疗性超声",
                    DRGs: "ZJ15",
                    name1: "与多发重要创伤诊断有关的其他手术室操作，不伴并发症与合并症",
                    cmi: "5.52"
                },
                {
                    operate: "0.1",
                    name: "化学治疗物质植入",
                    DRGs: "BJ11",
                    name1: "神经系统其他手术，伴有严重并发症与合并症",
                    cmi: "3.06"
                },
                {
                    operate: "0.1",
                    name: "化学治疗物质植入",
                    DRGs: "BJ13",
                    name1: "神经系统其他手术，伴有并发症与合并症",
                    cmi: "1.81"
                },
                {
                    operate: "0.1",
                    name: "化学治疗物质植入",
                    DRGs: "BJ15",
                    name1: "神经系统其他手术，不伴并发症与合并症",
                    cmi: "1.36"
                },
                {
                    operate: "00.1500x001",
                    name: "输注白细胞介素",
                    DRGs: "RB19",
                    name1: "急性白血病化学治疗和/或其他治疗",
                    cmi: "2.52"
                },
                {
                    operate: "00.1500x002",
                    name: "注射阿地白细胞介素",
                    DRGs: "RB19",
                    name1: "急性白血病化学治疗和/或其他治疗",
                    cmi: "2.52"
                },
                {
                    operate: "00.2400x001",
                    name: "冠状动脉血管内超声(IVUS)",
                    DRGs: "FC29",
                    name1: "冠状动脉搭桥伴心导管操作",
                    cmi: "2.01"
                },
                {
                    operate: "00.2400x001",
                    name: "冠状动脉血管内超声(IVUS)",
                    DRGs: "FM31",
                    name1: "经皮心导管检查操作，伴有严重并发症与合并症",
                    cmi: "3.39"
                }
            ]
        };
    },
    methods: {
        search1 () {
            //获取第一个input输入的值
            let input1 = document.getElementById("name1").value;
            //获取data中tableData数组
            let tableData = this.tableData;
            //定义一个新数据存放取出来的值
            //input的值是否等于tableData数据的值
            let arr1 = tableData.filter(function (data) {
                return data.operate === "input1";
            });
            console.log(arr1);
        },
        search2 () {
            let input2 = document.getElementById("name2").value;
            let tableData = this.tableData;
            let index2 = tableData.indexOf(input2);
            console.log(index2);
        }
    }
};
</script>
<style>
.comm1,
.comm2,
.comm3 {
    text-align: center;
}
.researchContent {
    width: 100%;
}
.substance1 {
    text-align: center;
}
.guide {
    width: 100%;
}
.guideTop {
    background-color: #0a77a0;
    margin-bottom: 1.875rem /* 30/16 */;
}
.guideTop ul {
    list-style-type: none;
    margin: 0;
}
.guideTop ul li a {
    color: #fff;
}
.guideTip .connect_h {
    font-size: 20px;
}
    .guideTip div {
        white-space: nowrap;
    }
    
    .guideTip div span {
        word-break: break-all;
    }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px) {
    .researchContent {
        width: 100%;
    }
    .comm1,
    .comm2,
    .comm3 {
        float: left;
        width: calc(100% / 3);
    }
    .comm2 img {
        width: 100%;
    }
    .comm3 {
        border-right: 1px solid #ccc;
    }
    .comm1 p {
        letter-spacing: 4px;
    }
    .comm3 .areas {
        font-size: 20px;
        color: #0a77a0;
    }
    .comm3 img {
        width: 25rem /* 400/16 */;
    }
    .comm3 p {
        font-size: 14px;
        letter-spacing: 4px;
        line-height: 25px;
    }
    .comm1.content-title {
        color: #0a77a0;
        font-size: 20px;
    }
}
</style>
